<template>
    <Chart :height="height" :option="chartOption" />
  </template>
  
  <script setup>
  import Chart from "@/components/charts/index.vue";
  import useChartOption from '@/hooks/charts';
  import { storeToRefs } from "pinia";
  import { useAppStore } from '@/pinia';
  
  const appStore = useAppStore();
  const { config } = storeToRefs(appStore);
  
  const props = defineProps({
    height: {
      type: String,
      default: '400px',
    },
    data: {
      type: Array,
      default: () => Array.from({ length: 10 }, (_, i) => ({ name: `数据${i + 1}`, value: Math.floor(Math.random() * 100) }))
    }
  });
  
  const primaryColor = '#0065ff';
  const secondaryColor = '#b0d0ff';
  
  const getColor = (value) => {
    const maxValue = Math.max(...props.data.map(item => item.value));
    const minValue = Math.min(...props.data.map(item => item.value));
    const threshold = (maxValue + minValue) / 2;
    return value > threshold ? primaryColor : secondaryColor;
  };
  
  const { chartOption } = useChartOption(() => {
    return {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
      },
      xAxis: {
        type: 'category',
        data: props.data.map(item => item.name), // 数据名称作为 x 轴
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      series: [
        {
          name: '数据',
          type: 'bar',
          data: props.data.map(item => ({
            value: item.value,
            itemStyle: { color: getColor(item.value) }
          })),
          label: {
            show: true,
            position: 'top', // 标签位置调整为顶部
            formatter: '{c}'
          },
          barCategoryGap: '50%', // 控制柱子之间的间距
        }
      ],
      grid: {
        left: '10%', // 调整整体图表的左间距
        right: '10%', // 调整整体图表的右间距
        top: '10%', // 调整整体图表的上间距
        bottom: '10%', // 调整整体图表的下间距
      }
    };
  });
  </script>
  
  <style scoped lang="scss">
  </style>